<template>
  <div class="remark">
    <Header :isLeft="true" :title="title" />
    <div class="remark-wrap">
      <textarea name="" id="" cols="30" rows="10" maxlength="100" v-model="text" placeholder="请填写额外对餐厅或起手小哥备注的信息"></textarea>
      <div class="tag-group">
        <span v-for="(item,index) in radioItem" :key="'info1'+index" @click="radioTagClick(item)" :class="{active: item.select}">{{item.name}}</span>
        <span v-for="(item,indey) in switchItem" :key="indey" @click="item.select = !item.select" :class="{active: item.select}">{{item.name}}</span>
      </div>
      <button class="btn-submit" @click="submitClick">确定</button>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'

export default {
  name: 'MyRemark',
  data() {
    return {
      text: '',
      title: '订单备注',
      radioItem: [
        {
          select: false, name: '不要辣'
        },
        {
          select: false, name: '少点辣'
        },
        {
          select: false, name: '多点辣'
        }
      ],
      switchItem: [
        {
          select: false, name: '不要香菜'
        },
        {
          select: false, name: '不要洋葱'
        },
        {
          select: false, name: '多点醋'
        },
        {
          select: false, name: '多点葱花'
        }
      ]
    }
  },
  components: {
    Header
  },
  methods: {
    radioTagClick(item) {
      this.radioItem.forEach(items => {
        items.select = false
      })
      item.select = true
    },
    submitClick() {
      let selectRemark = ''
      this.radioItem.forEach(item => {
        if (item.select) {
          selectRemark += item.name + ','
        }
      })

      this.switchItem.forEach(item => {
        if (item.select) {
          selectRemark += item.name + ','
        }
      })
      selectRemark += this.text
      console.log(selectRemark)
      this.$store.dispatch('setRemarkInfo', {
        tableware: this.$store.getters.remarkInfo.tableware,
        remark: selectRemark
      })
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.remark {
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  .remark-wrap {
    padding: 20px 10px 0;
    textarea {
      border: none;
      background-color: #eee;
      width: 100%;
      margin-bottom: 10px;
      border-radius: 8px;
      padding: 10px;
      box-sizing: border-box;
    }
    .tag-group {
      span {
        display: inline-block;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin: 5px 10px;
        font-size: 14px;
        &.active {
          background: #0186ff;
          color: #fff;
        }
      }
    }
  }
  .btn-submit {
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    background-color: #00e067;
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
  }
}
</style>
